前端学习圈

jq-02 选择器

一、选择器

选择器的实现比较复杂，消耗性能比较大，建议相同的选择器进行变量保存操作，避免重复使用选择器；

css选择器

可以使用所有的样式选择器；

选择器说明
#id获取id名
.class获取class类名
div获取标签名
div,p,li群组选择器
div.red获取class为red的div标签
div>span获取div下的直接子元素span；
div spandiv下的所有子元素span标签；
div~span选择下面所有的；

基本筛选选择器

选择器说明
:first第一个
:last最后一个
:eq(index)指定第一个，下标从0开始；
:not()除了小括号的标签；
:odd下标为奇数的标签，下标是从0开始的，所以选择的是偶数标签；
:even下标为偶数的标签
:gt(1)下标大于1的元素
:lt(1)下标小于1的元素；
:header所有h标签；
:root选中html标签；
:animated匹配所有正在执行动画效果的元素；

$("div:not(:animated)").animate({"width":"+=200"}) //给没有在动画的div，加长

内容选择器

选择器说明
:contains(我)选择内容有我的标签
:empty选择内容为空的标签，有空格或标签都不为空；
:parent选择有内容的标签；
:has(span)选择有span标签的标签；

隐藏看见

选择器说明
:hidden获取看不见的标签(在页面中不显示的标签) type="hidden" 和display:none；
:visible获取可以看见的标签，页面中显示的

属性选择器

选择器说明
div[class]有class属性的
div[class=box]div的class属性值为box的；
div[class^=box]以box开头的
div[class$=box]以box结尾的
div[class*=box]包含box的；
div[class][title]有class属性并且有title属性的；

子元素选择器

选择器说明
ul li:first-child选择所有父元素中第一个li first的区别：第一个父元素下所有li中的第一个li
ul li:last-child选择所有ul下的最后一个li；
:nth-child()选择指定的第几个标签，从1开始
:first-of-type选择第一次出现的；
:last-of-type最后一次出现的；
:nth-of-type()指定的第几个标签；

child：是从第一个孩子开始找；

of-type：是从第一次出现的孩子找的；

表单选择器

:input 选中所有表单标签，包括select、textarea；

选中具体某个input标签可以冒号type类型，select直接使用标签选择器；

例：

:text 选中单文本框；

.attr("checked",true)；设置复选框被选中状态

表单对象属性

选择器说明
:enabled选中所有可用的；
:disabled选中所有禁用的；
:checked选中的；
:selected下拉框被选中的；

二、迭代

$.each 

$.each($('li'), function(index, item) {})

// or
$('li').each(function(index, item){
    // 这里的item是每个元素, 使用jquery需要再次$(item)
    // 也可以$(this), this指向当前这个item
})

$.map 

var arr = [1,2,3,4]
$.map(arr, function(item, index){
    
})

当map操作数组返回null和undefined时，不会保存在新的数组中；

$.map不能直接$(b).map(function(){});

var ary = [1,2,3,4]
var aa = $.map(ary,function(a,b){
        if(a>3){
            return null
        }else{
            return a
        }
});
console.log(aa);    //[1,2,3]，4满足条件，返回空；

这里的aa是dom元素的，如果$(ary).map调用的话直接将类型转换jquery元素了；低版本浏览器会发生不兼容；标准调用方法是$.map(ary,function(){});

三、extend

扩展

$.extend(obj,obj1,obj2)；将obj1和obj2扩展到obj中，一般obj是一个空对象{}；

var obj3 = $.extend({},obj1,obj2)

深拷贝

复制地址和数据

原理：根据地址找到内容，并复制内容在堆中重新存储，返回新的地址；新的值修改的地址不影响旧的值；

var obj2 = $.extend(true,{},obj3)

默认是false(浅拷贝)；true深拷贝；如果不用true相当于声明了两个变量(加载慢)；如果用true就是拷贝；

var obj4 = {name:"zs"};
var obj6 = $.extend(true,{},obj4);
obj6.name = "ls";
console.log(obj6);    //ls
console.log(obj4);    //zs

浅拷贝(原生方法)

只复制地址，不复制数据；修改新变量的值，旧变量的值也一起修改了；

var obj4={name:"zs"};
var obj5=obj4;
obj5.name="ls";
console.log(obj5.name);        //ls
console.log(obj4.name);        //ls

原理：复制了obj4的地址，数据没有复制，所以修改了内容，obj4的地址也是那个内容，所以obj4就是obj5的内容；

四、方法

所有事件的调用：$("button").click(function(){});

直接去掉on；直接括号函数，

.index()；元素的下标；

jquery选项卡

$("button").click(function(){
    $(".box div").eq($(this).index()).addClass("active").siblings("div").removeClass();
    $(this).addClass("on").siblings("button").removeClass();
})
//链式调用，可以一直写点，
//隐式循环，不用循环，隐式调用循环；

高频面试题

● $(document).ready() 方法和 window.onload 有什么区别？

● jQuery 的属性拷贝 (extend) 的实现原理是什么，如何实现深拷贝？